<template>
	<div class="cus-pagination">
		<uni-pagination :current="current" :total="total" title="title" :prev-text="prevText" :next-text="nextText" :show-icon="showIcon" @change="onPageChange"/>
	</div>
</template>

<script>
	/**
	   * 语法糖value
	   * @title 标题文字
	   * @prevText 左侧按钮文字
	   * @nextText 右侧按钮文字
	   * @current 当前页
	   * @total 数据总量
	   * @pageSize 每页数据量
	   * @onChange 点击页码按钮时触发,回调方法 -> e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
	   */
	export default {
		name: "cus-pagination",
		components: {  },
		data() {
			return { }
		},
		props: {
			title: {
				type: String,
				default: '标题文字'
			},
			current: {
				type: Number,
				default: 3
			},
			total: {
				type: Number,
				default: 1000
			},
			pageSize: {
				type: Number,
				default: 10
			},
			showIcon: {
				type: Boolean,
				default: false
			},
			prevText: {
				type: String,
				default: '前一页'
			},
			nextText: {
				type: String,
				default: '后一页'
			}
		},
		methods: {
			onPageChange(e) {
				console.log(e)
				// this.current = e.current
			}
		},
		styleIsolation: 'shared',
		computed: {
		}
	}
</script>

<style> 

/deep/.uni-pagination--enabled {
	border: 1px solid #0284F1;
	background: #081335;
}
/deep/.uniui-left:before {
	color: #ffffff;
}
/deep/.uniui-right:before {
	color: #ffffff;
}
/deep/.uni-pagination__btn {
	border-radius: 0;
}
/deep/.uni-pagination__num-tag {
	border: 1px solid #0284F1;
	border-radius: 0;
	width: 10rpx !important;
}


</style>

<style lang="scss" scoped> 
.cus-pagination {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	
}
</style>
